<template>
    <div class="child-cnt">
        <div class="left">
            <h6>允许开启的子流程</h6>
            <select v-model="selected" name="" id="">
                <optgroup v-for="v in modelsWithCat" :label="v.name">
                    <option v-for="vv in v.children" :value="vv._id">{{vv.modelName}}</option>
                </optgroup>
            </select>
            <div>
                <a href="javascript:;" @click="add">添加</a>
                <a href="javascript:;" @click="remove">删除</a>
            </div>
            <div style="margin-top: 20px;">
                <select v-model="selected2" name="" id="" size="10">
                    <option v-for="(v,i) in data.allows" :value="i">{{v.name}}</option>
                </select>
            </div>

            <div>
                <h5>
                    手动开启子流程
                </h5>
                <label >
                    是
                    <input type="radio" name="manual" v-model="data.manual" value="1">
                </label>
                <label >
                    否
                    <input type="radio" name="manual" v-model="data.manual" value="0">
                </label>
                <h5>
                    强制开启子流程
                </h5>
                <label >
                    是
                    <input type="radio" name="force" v-model="data.force" value="1">
                </label>
                <label >
                    否
                    <input type="radio" name="force" v-model="data.force" value="0">
                </label>
                <h5>
                    必须有一个完结的子流程
                </h5>
                <label>
                    是
                    <input type="radio" name="finished" v-model="data.finished" value="1">
                </label>
                <label>
                    否
                    <input type="radio" name="finished" v-model="data.finished" value="0">
                </label>
            </div>
        </div>

        <div class="right">
            <div class="selector">
                <div style="width: 300px;">
                    父字段选择框
                    <div>
                        <select name="" id="" size="10" v-model="current.pfSelected">
                            <option v-for="(v) in (current.parentFields || [])" :value="v">{{v}}</option>
                        </select>
                    </div>
                </div>
                <div style="width: 300px;">
                    子字段选择框
                    <div>
                        <select name="" id="" size="10" v-model="current.cfSelected">
                            <option v-for="(v) in (current.childFields || [])" :value="v">{{v}}</option>
                        </select>
                    </div>
                </div>
            </div>


            <div style="padding-top: 10px;padding-bottom: 10px;">
                <a href="javascript:;" @click="addp2c" style="margin-right: 10px;">添加父->子映射</a>
                <a href="javascript:;" @click="addc2p">添加子->父映射</a>
            </div>

            <div>
                <div>
                    父子映射
                    <ul v-if="data.allows[this.selected2]">
                        <li  v-for="(v,i) in data.allows[this.selected2].p2c">{{v.from}} -> {{v.to}} <span href="javascript:;" class="fa fa-times delicon" @click="removep2c(i)"></span></li>
                    </ul>
                </div>
                <div>
                    子父映射
                    <ul v-if="data.allows[this.selected2]">
                        <li  v-for="(v,i) in data.allows[this.selected2].c2p">{{v.from}} -> {{v.to}} <span href="javascript:;" class="fa fa-times delicon" @click="removec2p(i)"></span></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    var component = {
        props: ["data"],
        data(){
            return {
                models: {},
                modelsWithCat: [],
                selected: "",
                selected2: "",
                current: {
                    // childFields:[],
                    // parentFields:[],//opener.fields,
                    // pfSelected: "",
                    // cfSelected: ""
                }
            }
        },
        watch:{
            selected2(nv){
                Vue.set(this, "current", {
                    childFields:[],
                    parentFields:opener.fields,
                    pfSelected: "",
                    cfSelected: ""
                });

                var t = this;
                $.get("/api/bpm/workflow/getWorkflowFormFields",{id:nv}, function (msg) {
                    if(!msg.success){
                        return;
                    }
                    (msg.data || []).forEach(e => {
                        t.current.childFields.push(e.title || "");
                    });
                    // console.log(msg)
                },"json");
            }
        },
        methods:{
            getc2p(){
                try{
                    return this.data.allows[this.selected2].c2p;
                }catch (e) {
                    return [];
                }
            },
            getp2c(){
                try{
                    return this.data.allows[this.selected2].p2c;
                }catch (e) {
                    return [];
                }
            },
            removec2p(i){
                this.getc2p().splice(i, 1);
            },
            removep2c(i){
                this.getp2c().splice(i, 1);
            },
            addp2c(){
                console.log(this, this.selected2, this.current.pfSelected, this.current.cfSelected);
                try{
                    if(this.selected2 && this.current.pfSelected && this.current.cfSelected){
                        //查找一个不存在的
                        var exists = (this.data.allows[this.selected2].p2c || []).filter(e => e.from == this.current.pfSelected && e.to == this.current.cfSelected).length;
                        if(exists){
                            return
                        }
                        this.data.allows[this.selected2].p2c.push({
                            from: this.current.pfSelected,
                            to: this.current.cfSelected
                        })
                    }
                } catch (e) {
                    console.log(e)
                }
            },
            addc2p(){
                try{
                    if(this.selected2 && this.current.pfSelected && this.current.cfSelected){
                        var exists = (this.data.allows[this.selected2].c2p || []).filter(e => e.to == this.current.pfSelected && e.from == this.current.cfSelected).length;
                        if(exists){
                            return
                        }
                        this.data.allows[this.selected2].c2p.push({
                            to: this.current.pfSelected,
                            from: this.current.cfSelected
                        })
                    }
                } catch (e) {
                    console.log(e)
                }
            },
            remove(){
                Vue.delete(this.data.allows, this.selected2);
            },
            add(){
               var d = this.models[this.selected];
               if(!d) {
                   console.error(this.selected)
                   alert("无法添加")
                   return
               }
               Vue.set(this.data.allows, this.selected, {
                   name: d,
                   //父对子映射
                   p2c: [],
                   //子对父映射
                   c2p: []
               });


            }
        },
        created(){
            Vue.set(this.data, this.data || {})
            Vue.set(this.data, "allows", this.data.allows || {})
            Vue.set(this.data, "manual", this.data.manual || 0)
            Vue.set(this.data, "force", this.data.force || 0)
            Vue.set(this.data, "finished", this.data.finished || 0)
            // this.data = this.data || {};
            // this.data.allows = this.data.allows || {};

            var t = this;
            $.get("/api/bpm/workflow/getWorkflowNames2", function (msg) {
                if(!msg.success){
                    return;
                }
                Vue.set(t, "modelsWithCat", msg.data);
                // console.log(t.modelsWitchCat)
                (msg.data||[]).forEach(ee => {
                    ee.children.forEach(e => {
                        Vue.set(t.models, e._id, e.modelName)
                    })
                });
            },"json");

        }
    }
</script>

<style>
    .child-cnt{
        padding: 10px;
        display: flex;
        flex-direction: row;
    }
    .child-cnt .left{
        margin-right: 10px;
        width: 300px;
    }
    .child-cnt .selector{
        display: flex;
        flex-direction: row;
    }
    .child-cnt select{
        width: 280px;
    }
    .child-cnt .delicon{
        color: #ef4532;
    }
    .child-cnt label {
        font-weight: normal;
        font-size: 12px;
        margin-right: 10px;
    }

</style>